<!-- 管理课程-详情 -->
<template>
  <view class="classdetail"
        v-if="Object.keys(detailData).length>0">
    <view v-if="!showTab">
      <xjx-back :homeShow="true" :backShow="backBtnShow"></xjx-back>
    </view>
    <view :class="showTab?'transi show':'transi'">
      <uni-nav-bar fixed
                   status-bar
                   z-index="1"
                   title="课程详情">
        <view slot="left"
              class="fanhui">
          <xjx-back :homeShow="true"></xjx-back>
        </view>
      </uni-nav-bar>
      <view class="tab_wrap"
            :style="{top:topHeight+'rpx'}">
        <van-tabs :active="showActive"
                  sticky
                  color="#2E88FF"
                  line-width="25%"
                  z-index="1"
				  v-if="showTab"
                  @click="changeTab">
          <van-tab title="课程信息"
                   name="0"></van-tab>
          <van-tab title="购买须知"
                   name="1"></van-tab>
          <van-tab title="注意事项"
                   name="2"></van-tab>
          <van-tab v-if="listdata.length>0"
                   title="其他课程"
                   name="3"></van-tab>
        </van-tabs>
      </view>
    </view>
    <!-- 轮播 -->
    <view class="headimg">
      <swiper autoplay
              :indicator-dots="detailData.classImgList.length>1"
              indicator-color="rgba(255,255,255,0.3)"
              indicator-active-color="#fff"
              class="swiper_wrap">
        <swiper-item v-for="(item,index) in detailData.classImgList"
                     @click="showImg(index)"
                     :key="index">
          <image :src="item.fullImgUrl"
                 mode="aspectFill" />
        </swiper-item>
      </swiper>
    </view>
    <view class="paytime">
      <view v-if="paystart"
            class="paystart">
        <!-- <view class="classPrice">
					<view class="ys">¥</view>
					<view class="yb">{{detailData.cost}}</view>
				</view> -->
        <view class="r">
          <text>距开始抢购还有</text>
          <view>{{datetime.hours}}</view>
          <text>:</text>
          <view>{{datetime.minutes}}</view>
          <text>:</text>
          <view>{{datetime.seconds}}</view>
        </view>
      </view>
      <view v-if="payend"
            class="payend">
        <!-- <view class="classPrice">
					<view class="ys">¥</view>
					<view class="yb">{{detailData.cost}}</view>
				</view> -->
        <view class="r">
          <text>距报名结束还有</text>
          <view>{{datetime.hours}}</view>
          <text>:</text>
          <view>{{datetime.minutes}}</view>
          <text>:</text>
          <view>{{datetime.seconds}}</view>
        </view>
      </view>
    </view>

    <scroll-view class="scroll-view"
                 :style="{height:autoHeight +'rpx'}"
                 scroll-y>
      <view class="ccc_wrap"
            id="ccc_wrap">
        <!-- 课程名 -->
        <view class="biankuang classtit floorType">
          <view class="l">
            <!-- <view v-if="!(paystart || payend) " class="classPrice"> -->
            <view class="classPrice">
              <view class="ys">¥</view>
              <template v-if="detailData.type!='2'">
                <view class="yb"
                      v-if="priceall.minPrice*100 !== priceall.maxPrice*100">{{priceall.minPrice}}-{{priceall.maxPrice}}</view>
                <view class="yb"
                      v-else>{{priceall.minPrice}}</view>
              </template>
              <template v-else>
                <view class="yb">{{detailData.cost}}</view>
              </template>
            </view>
            <!-- 限购一个也不显示积分 -->
						<view class="cumulactive" v-if="jifenNum>0&&Object.keys(pointInfo).length>0&&(detailData.isLimit!=='1')&&pointInfo.point>0">
							<view class="cumulactive_max" v-if="pointInfo&&pointInfo.formula=='1'&&pointInfo.multiple>1">
								限时{{pointInfo&&pointInfo.multiple}}倍积分奖励
							</view>
							<view :class="[pointInfo&&pointInfo.formula=='1'&&pointInfo.multiple>1?'cumulactive_max cu_margin':'cumulactive_max']">
									最高可获积分{{pointInfo&&pointInfo.point}}
							</view>
						</view>
            <text class="line-clamp-2">{{detailData.title}}</text>
            <view class="small">
              <view v-if="detailData.type=='0'">私教课</view>
              <view v-if="detailData.type=='1'">团体课</view>
              <view v-if="detailData.type=='2'">集训班</view>

              <view v-if="detailData.medal=='1'">金牌教练</view>
            </view>
          </view>
          <view class="r">
            <!-- <view></view> -->
            <view>
              <button class="fenxiang"
                      open-type="share">
                <view class="iconfx"></view>
                <text>分享</text>
              </button>
            </view>
            <!-- <view>已售 {{detailData.enterNum}}</view> -->
            <view></view>
          </view>
        </view>
        <!-- 说明费用 -->
        <view class="biankuang shuoming"
              v-if="detailData.type !=='2'">
          <view class="head">
            <text>课程费用说明</text>
          </view>
          <!-- 课程配置表格 -->
          <view class="langtimes">
            <view class="wrap">
              <view class="langtime_wrap">
                <view class="tr head">
                  <view v-for="(aa,ind) in clssDatas"
                        :key="aa.id"
                        class="th">
                    <text>{{aa.text}}</text>
                  </view>
                </view>
                <view class="tr con">
										<view class="td_two"
													v-for="(item,index) in liebiaoConfig"
													:key="index">
											<block class="td"
														 v-for="(obj,i) in item.classCount"
														 :key="i">
												<view class="td_line_two">
													<view class="">
														{{obj || 0}}
													</view>
												</view>
											</block>
										</view>
									</view>
              </view>
            </view>
          </view>
        </view>
        <!-- 课程说明 -->
        <view class="shuoming biankuang">
          <view class="head">
            <text>课程说明</text>
          </view>
          <view class="tit">{{detailData.content}}</view>
          <view class="head">
            <text v-if="detailData.type=='2'">上课时段</text>
            <text v-else>上课课表</text>
            <text class="ccc">具体以开放约课后约课时间为准</text>
          </view>
          <!-- 短期课时间 -->
          <view v-if="detailData.type=='2'"
                class="shorttime">
            <view class="time">{{shorttime}}</view>
            <view class="times">
              <view v-for="(item,index) in shortdate"
                    :key="index">{{item}}</view>
            </view>
          </view>
          <!-- 长期课程的时间 -->
          <view v-else
                class="langtimes">
            <view class="wrap">
              <view class="langtime_wrap">
                <view class="tr head">
                  <view v-for="(aa,ind) in liebiaodata"
                        :key="aa.week"
                        class="th">
                    <text>{{aa.week}}</text>
                  </view>
                </view>
                <view class="tr con">
										<view class="td"
													v-for="(item,index) in liebiaodata"
													:key="index">
											<block class="td"
														 v-for="(obj,i) in item.time"
														 :key="i">
												<view class="td_line">
													<view class="">
														{{obj.setTime || ''}}
													</view>
													<!-- <view class=""
																v-if="obj.setTime">
														{{obj.peo || ''}}人
													</view> -->
												</view>
											</block>
										</view>
									</view>
              </view>
            </view>
          </view>
        </view>
        <!-- 俱乐部信息 -->
        <view class="biankuang julebu">
          <view class="head">
            <text>俱乐部及场馆信息</text>
          </view>
          <view class="con"
                @click="gengduo('julebu')">
            <view class="conimg">
              <image v-if="jlbdata.icon"
                     :src="jlbdata.icon" />
              <image v-else
                     :src="'@/static/images/image-default.png'|addBaseImgUrl" />
            </view>
            <view class="rcon">
              <view class="condata">
                <text class="line-clamp-2">{{jlbdata.clubName}}</text>
                <view class="xing">
                  <van-rate :allow-half="true"
                            readonly
                            :value="jlbdata.praise"
                            size="14px"
                            color="#FDD549" />
                  <text>{{jlbdata.praise|floorOne}}</text>
                </view>
                <view class="small">
                  <view v-if="jlbdata.serviceContent.includes('1')">课程</view>
                  <view v-if="jlbdata.serviceContent.includes('2')">活动</view>
                </view>
              </view>
              <view class="dingwei">
                <!-- <view class="top"><van-icon name="location" />{{posXY.toFixed(1)}}Km</view> -->
                <view @click.stop="callphone"
                      class="bot">
                  <van-icon name="phone-circle" />
                </view>
              </view>
            </view>
          </view>
          <view class="dizhi"
                @click="toPlaceMap">
            <view class="l">
              <view class="icondw"></view>
            </view>
            <view class="c">
              <view class="c-top">
                <text class="place-name">{{jlbdata.name}}</text>
                <text class="place-distance">{{posXY.toFixed(1)}}km</text>
              </view>
              <text class="ccc">{{jlbdata.provinceName +' '+jlbdata.cityName+' '+jlbdata.areaName+' '+jlbdata.remarks}}</text>
            </view>
            <view class="r">
              <van-icon name="arrow" />
            </view>
            <!-- <view class="r"><van-icon name="arrow" /></view> -->
          </view>
        </view>
        <!-- 教练信息 -->
        <view class="biankuang jiaolian"
              @click="gengduo('jiaolian')">
          <view class="head">
            <text>教练信息</text>
          </view>
          <view class="jl_con">
            <view :class="jiaoliandata.medal=='1'?'l bor':'l'">
              <view v-if="jiaoliandata.medal=='1'"
                    class="icon_hg"></view>
              <image v-if="jiaoliandata.icon"
                     :src="jiaoliandata.icon"
                     mode=""></image>
              <image v-else
                     :src="'@/static/images/image-default.png'|addBaseImgUrl"
                     mode=""></image>
            </view>
            <view class="c">
              <text class="name">{{jiaoliandata.relName}}</text>
              <text class="jlb">{{jiaoliandata.clubName}}</text>
              <view class="xing">
                <van-rate :allow-half="true"
                          readonly
                          :value="jiaoliandata.praise"
                          size="14px"
                          color="#FDD549" />
                <text>{{jiaoliandata.praise|floorOne}}</text>
              </view>

            </view>
            <view class="r">
              <view class="small s"
                    v-if="jiaoliandata.licenseTypeName !== '无'">
                <view>{{jiaoliandata.licenseTypeName}}</view>
              </view>
            </view>
          </view>
        </view>
        <!-- 购买须知 -->
        <view class="biankuang floorType">
          <view class="head">
            <text>购买须知</text>
          </view>
          <!-- 短期课 -->
          <view v-if="detailtype=='2'"
                class="shortxuzhi gmxz_con">
            <view>
              <text class="">课程报名时间：</text><text>{{bmtime}}</text>
            </view>
      <!--      <view>去除6.3
              <text class="">课程开课时间：</text><text>{{shorttime}}</text>
            </view> -->
            <view>
              <text>总课时：</text><text>{{detailData.classCount}}</text>
            </view>
            <view>
              <text>课程限购：</text><text>{{detailData.isLimit=='1'?'限购1个':'不限购'}}</text>
            </view>
          </view>
          <!-- 长期课 -->
          <view v-else
                class="gmxz_con">
            <!-- <view class="gmxz_con">
              <text>有效期：</text><text>购买后{{detailData.classDays}}天有效</text>
            </view> -->
            <view>
              <text class="">课程报名时间：</text><text>{{bmtime}}</text>
            </view>
            <view>
              <text class="">课程开课时间：</text><text>{{shorttime}}</text>
            </view>
            <!-- <view>
              <text>总课时：</text><text>{{detailData.classCount}}小时</text>
            </view> -->
            <!-- <view>
              <text>单次课程人数：</text><text>不超过 {{detailData.numbers}} 人</text>
            </view> -->
            <view>
              <text>约课限制：</text><text>课程开始前{{detailData.cancelHours}}小时不能取消约课</text>
            </view>
            <view>
              <text>课程限购：</text><text>每个球员{{detailData.isLimit=='1'?'限购 1 个':'不限购'}}</text>
            </view>
          </view>
        </view>
        <view class="biankuang floorType">
          <view class="head">
            <text>注意事项</text>
          </view>
          <xjx-zy-con></xjx-zy-con>
        </view>
        <view class="biankuang floorType"
              v-if="listdata.length>0">
          <view class="head mar_none">
            <text>猜您喜欢</text>
          </view>
          <view v-for="(item,index) in listdata" :key="index">
            <xjx-class-item v-if="index<=1"
                      @todetail="gotodetail"
                      :item="item"></xjx-class-item>
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- 底部定位按钮 0已发布2未发布  state报名状态0未开始1进行中2已结束 classState课程状态-->
    <view class="detail_btnwrap"
          v-if="detailData.state=='0'|| detailData.state=='1' || detailData.state=='2'">
      <view class="jg">价格：</view>
      <view class="ys">¥</view>
      <!-- <view class="yb">{{detailData.cost}}</view> -->
      <template v-if="detailData.type!='2'">
        <view class="yb"
              v-if="priceall.minPrice*100 !== priceall.maxPrice*100">{{priceall.minPrice}}-{{priceall.maxPrice}}</view>
        <view class="yb"
              v-else>{{priceall.minPrice}}</view>
      </template>
      <template v-else>
        <view class="yb">{{detailData.cost}}</view>
      </template>
      <view class="btn">
        <view v-if="detailData.state=='0'"
              class="jijiang">即将开抢</view>
        <xjx-login v-else-if="detailData.state=='1'"
                   @callBack="gotoconfirm('choose')">
          <!-- slot中只能包含一个且需要触发登录的按钮 -->
          <template v-slot:loginBtn>
            <van-button round
                        type="info"
                        custom-style="padding:0 58rpx;height:78rpx;margin-right:10rpx;">立即抢购</van-button>
          </template>
        </xjx-login>
        <view class="jieshu"
              v-else-if="detailData.state=='2'">报名结束</view>
      </view>
    </view>
    <!-- 立即抢购弹窗 -->
    <van-popup round
               :show="buyWrapFlag"
               position="bottom"
               @close="gotoconfirm('close')"
               class="buy-pop-wrap"
               z-index="2"
               closeable>
      <view class="hypopup">
        <view class="class-info-head"
              @touchmove.stop.prevent>
          <image :src="jiaoliandata.icon" />
          <view class="info-detail">
            <view class="price">
              <text>￥</text>
              <text>{{currentCheckedSlot.cost}}</text>
            </view>
            <view class="change-title"
                  v-if="currentCheckedSlot.hourType == '1'">不限课时 有效期{{currentCheckedSlot.classDays}}天</view>
            <view class="change-title"
                  v-else>{{currentCheckedSlot.classCount}}课时 有效期{{currentCheckedSlot.classDays}}天</view>
          </view>
        </view>
        <!-- <scroll-view scroll-y="true"
                     @touchmove.self.stop> -->
        <view class="list-wrap">
          <text @click="changeCurrentSlot(item)"
                :class="['list-item', currentCheckedSlot.id === item.id ? 'active' : '']"
                v-for="item in detailData.spClassConfigs"
                :key="item.id">
            <template v-if="item.hourType == '1'">不限课时 有效期{{item.classDays}}天</template>
            <template v-else>{{item.classCount}}课时 有效期{{item.classDays}}天</template>
          </text>
        </view>
        <!-- </scroll-view> -->
        <van-button @click="gotoconfirm('go')"
                    round
                    type="info"
                    custom-style="width:690rpx;height:88rpx;margin:0 auto;">立即抢购</van-button>
      </view>
    </van-popup>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex"
import { rili, dateUtils, positionXY } from "@/common/js/util.js";
let observer = null;
export default {
  data() {
    return {
      detailid: "",
      detailtype: "", //订单长期短期
      liebiaodata: [], //长课列表数据
      shorttime: "", //短期课时间
      bmtime: "", //报名时间
      shortdate: [], //短期课时间段
      liebiaoConfig: [], //长课配置列表数
      priceSection: [], //价格区间
      priceall: {
        minPrice: "",
        maxPrice: ""
      },
      radioonoff: true, //是否限购对号
      jlbdata: {
        serviceContent: ""
      }, //俱乐部信息
      detailData: {}, //
      jiaoliandata: {}, //教练信息
      state: "", //0:未开始，1：进行中，2：已结束
      paystart: false, //
      payend: false, //
      datetime: {}, //倒计时时间
      listdata: [], //猜您喜欢
      posXY: Number(),
      currentPos: {
        latitude: "", //要去的纬度-地址
        longitude: "", //要去的经度-地址
        name: ""
      },
      fxonoff: false,
      height: "",
      topHeight: "", //切换栏距离顶部的高度
      sHeight: "", //滚动到高的时，切换栏显示
      ztHeight: "", //状态高度
      dhHeight: "", //导航高度
      showTab: false, //切换栏显示
      showActive: "0", //切换栏显示
      anchorArray: [], //切换高度
      autoHeight: "",
      buyWrapFlag: false, // 立即抢购弹窗开关
      clssDatas: [
        {
          text: "课时(小时)",
          time: ["50", "100", "不限"],
          id: 1
        },
        {
          text: "费用(元)",
          time: ["1000", "2000", "3000"],
          id: 2
        },
        {
          text: "有效期(天)",
          time: ["180", "360", "365"],
          id: 3
        }
      ],
      currentCheckedSlot: {}, // 当前所选规则
			jifenNum:'',//最大金额
			pointInfo:{
				// formula:'1',//	是否显示积分倍数 1显示 0不显示
				// multiple:1,// 积分倍数
				// point:1 //最高积分数
			},
      showImgsArr:[],//预览图片
			backBtnShow: true
    };
  },
  computed: {
    ...mapState(["userInfo", "accessToken", "clubInfo", "position"])
  },
  onLoad(option) {
    this.detailid = option.id;
    this.fxonoff = option.fxonoff ? true : false;
    this.getdetail();
		let pages = getCurrentPages()
		if(pages.length==1){
			this.backBtnShow = false
		}
	},
  mounted() {
    this.height = uni.getMenuButtonBoundingClientRect().top + "px";
    let systemInfo = uni.getSystemInfoSync();
    // px转换到rpx的比例
    let pxToRpxScale = 750 / systemInfo.windowWidth;
    // 状态栏的高度
    this.ztHeight = systemInfo.statusBarHeight * pxToRpxScale;
    this.dhHeight = 44 * pxToRpxScale;

    this.topHeight = this.ztHeight + this.dhHeight + 60;
    console.log(this.topHeight);
  },
  onReady() {
    console.log("onReady------------------");
    let _this = this;
    let query = wx.createSelectorQuery();
    query
      .select(".ccc_wrap")
      .boundingClientRect(res => {
        console.log("res-23-----1", res);
        if(res){
          _this.sHeight = res.top - _this.topHeight; //根据实际需求加减值
        }
      })
      .exec();
    let heightArr = [];
    let h = 0;
    setTimeout(() => {
      query
        .selectAll(".floorType")
        .boundingClientRect(react => {
          react.forEach(res => {
            if(res){
              h = res.top - _this.topHeight;
              heightArr.push(h);
            }
            
          });
          this.anchorArray = heightArr;
        })
        .exec();
    }, 1000);
  },
  onPageScroll(e) {
    //滚动
    //切换状态栏出现
    if (e.scrollTop > this.sHeight && e.scrollTop>0) {
      this.showTab = true;
      wx.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#000000'
      })
    } else {
      this.showTab = false;
      wx.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#ffffff'
      })
    }
    if (
      this.anchorArray[1] > e.scrollTop &&
      e.scrollTop > this.anchorArray[0]
    ) {
      this.showActive = "0";
    } else if (
      this.anchorArray[2] > e.scrollTop &&
      e.scrollTop > this.anchorArray[1]
    ) {
      this.showActive = "1";
    } else if (
      this.anchorArray[3] - 300 > e.scrollTop &&
      e.scrollTop > this.anchorArray[2] &&
      this.anchorArray.length > 3
    ) {
      this.showActive = "2";
    } else if (
      this.anchorArray[3] - 300 < e.scrollTop &&
      this.anchorArray.length > 3
    ) {
      this.showActive = "3";
    } else if (
      e.scrollTop > this.anchorArray[2] &&
      this.anchorArray.length == 3
    ) {
      this.showActive = "2";
    }
  },
  methods: {
    gotoback(text) {
      if (text) {
        uni.navigateBack();
      } else {
        uni.switchTab({
          url: "/pages/index/index"
        });
      }
    },
    changeTab(e) {
      //切换栏
      console.log("eee", e.detail.index);
      let _this = this;
      let topH = _this.anchorArray[e.detail.index] + _this.dhHeight;
      // this.showActive = String(e.detail.index)
      uni.pageScrollTo({
        scrollTop: topH,
        duration: 300
      });
    },
    //预览图片
    showImg(index){
      uni.previewImage({
        current:index,
        urls:this.showImgsArr,
      })
    },
    getdetail() {
      //获取详情
      this.$api
        .getClassDetailById(
          {
            "ACCESS-TOKEN": this.accessToken
          },
          this.detailid
        )
        .then(res => {
          if (res && res.code == "200" && res.data) {
            this.detailtype = res.data.type;
            this.detailData = res.data;
            this.currentCheckedSlot = res.data.spClassConfigs[0];
            let start = res.data.classStart.split(" ")[0].replace(/-/g, "/");
            let end = res.data.classEnd.split(" ")[0].replace(/-/g, "/");
						if (res.data.type == "2") {//短期课
							this.shorttime = start + "-" + end;
						}else{//长期课
							 this.shorttime = start;
						}
            let bmstart = res.data.payStart.split(" ")[0].replace(/-/g, "/");
            let bmend = res.data.payEnd.split(" ")[0].replace(/-/g, "/");
            this.bmtime = bmstart + "-" + bmend;
            this.getchangguan(res.data.placeId);
            this.getjiaolan(res.data.coachId);
            this.getlistdata();
            this.radioonoff = res.data.isLimit == "1" ? true : false;
            this.state = res.data.state;
            let arrImg = []
            res.data.classImgList.map((item,index)=>{
              arrImg.push(item.fullImgUrl)
            })
            this.showImgsArr = arrImg
            let time_;
            if (res.data.payStartCountDown > 0 && res.data.state == "0") {
              this.paystart = true;
              //未开始
              this.datetime = dateUtils.formatSecond(
                res.data.payStartCountDown
              );
              let num = res.data.payStartCountDown;
              time_ = setInterval(() => {
                num -= 1;
                this.datetime = dateUtils.formatSecond(num);
                if (num <= 0) {
                  clearInterval(time_);
                }
              }, 1000);
            } else if (res.data.payEndCountDown > 0 && res.data.state == "1") {
              this.payend = true;
              let num = res.data.payEndCountDown;
              time_ = setInterval(() => {
                num -= 1;
                this.datetime = dateUtils.formatSecond(num);
                if (num <= 0) {
                  clearInterval(time_);
                }
              }, 1000);
            }
            if (res.data.type == "2") {
              //短期课
              let arr = [];
              res.data.spClassSlots.map(item => {
                arr.push(
                  item.startTime.slice(0, 5) + "-" + item.endTime.slice(0, 5)
                );
              });
              this.shortdate = arr;
            } else {
              //长期课
              let datas = rili.jktolbDetail(res.data.spClassSlots);
              let num = 0;
              for (let i = 0; i < datas.length; i++) {
                //console.log('item',datas[i].time.length)
                if (datas[i].time.length > num) {
                  num = datas[i].time.length;
                }
              }
              for (let i = 0; i < datas.length; i++) {
                datas[i].time.length = num;
              }
              this.liebiaodata = datas;
              const spCopyData = JSON.parse(
                JSON.stringify(res.data.spClassConfigs)
              );
              let configs = rili.configjk(spCopyData);
              this.liebiaoConfig = configs;
              this.priceSection = this.liebiaoConfig[1].classCount;
              this.priceall.minPrice = Number(this.priceSection[0]);
              this.priceall.maxPrice = Number(
                this.priceSection[this.priceSection.length - 1]
              );
              console.log(this.liebiaoConfig);
              console.log(this.liebiaoConfig);
              console.log(this.priceall);
            }
						if(this.priceall.maxPrice>0||res.data.cost>0){
							if(this.priceall.maxPrice){
								this.jifenNum=this.priceall.maxPrice
							}else if(this.priceall.minPrice>0){
								this.jifenNum=this.priceall.minPrice
							}else if(this.priceall.maxPrice=='0'||this.priceall.minPrice=='0'){
								this.jifenNum=0
							}else{
								this.jifenNum=res.data.cost
							}
							this.queryPointInfo()
						}
						
          }
        });
    },
		async queryPointInfo(){//获取可获得积分数
			let param={
				goodsAmount:this.jifenNum,
				type:'4'
			}
			console.log(this.priceall,'评价详情接口')
			const res =await this.$api.queryPointInfo(param)
			if(res && res.code == 200){
					this.pointInfo=res.data
			}
		},
    getchangguan(id) {
      //获取俱乐部场馆信息/api/club/place/get/{id
      this.$api
        .getClubPlaceDetail(
          {
            "ACCESS-TOKEN": this.accessToken
          },
          id
        )
        .then(res => {
          if (res.code == "200" && res.data) {
            this.jlbdata = res.data;
            this.currentPos = {
              latitude: res.data.y,
              longitude: res.data.x,
              name: res.data.name
            };
            let p1 = {
              lng: res.data.x,
              lat: res.data.y
            };
            let p2 = {
              lng: this.position.lng,
              lat: this.position.lat
            };
            console.log("p1p2", p1, p2);
            this.posXY = Number(positionXY(p1, p2));
          }
        });
    },
    getjiaolan(id) {
      //获取教练信息
      this.$api
        .getCoachDetailById(
          {
            "ACCESS-TOKEN": this.accessToken
          },
          id
        )
        .then(res => {
          if (res.code == "200" && res.data) {
            this.jiaoliandata = res.data;
          }
        });
    },
    gotodetail(id) {
      //去详情
      uni.navigateTo({
        url: "/course/detail/detail?id=" + id
      });
    },
    // 点击立即购买 跳转确认订单 action: choose 选择规格 close 关闭 go 跳转确认订单
    gotoconfirm(action) {
      if (Number(this.detailData.type) === 2) {
        // 去确认订单
        uni.navigateTo({
          url:
            "/mainProcess/confirmOrder/confirmOrder?id=" +
            this.detailid +
            "&type=class"
        });
        return;
      }
      if (action === "choose" && this.detailData.spClassConfigs.length > 1) {
        this.buyWrapFlag = true;
        return;
      }
      if (action === "close") {
        this.buyWrapFlag = false;
        return;
      }
      uni.setStorageSync("langClassConfigData", this.currentCheckedSlot);
      uni.navigateTo({
        url:
          "/mainProcess/confirmOrder/confirmOrder?id=" +
          this.detailid +
          "&type=class&configId=" +
          this.currentCheckedSlot.id
      });
    },
    toPlaceMap() {
      console.log("地图", this.currentPos);
      let currentPos = this.currentPos;
      uni.openLocation({
        latitude: Number(currentPos.latitude), //要去的纬度-地址
        longitude: Number(currentPos.longitude), //要去的经度-地址
        name: currentPos.name
      });
    },

    gengduo(text) {
      //更多
      if (text == "julebu") {
        uni.navigateTo({
          url: "/mainProcess/club/detail/detail?id=" + this.detailData.clubId
        });
      } else if (text == "jiaolian") {
        uni.navigateTo({
          url: "/mainProcess/goldCoach/detail/detail?id=" + this.detailData.coachId
        });
      } else if (text == "list") {
        uni.switchTab({
          url: "/pages/course/index/index"
        });
      }
    },
    getlistdata() {
      //获取列表数据

      let data = {
        "ACCESS-TOKEN": this.accessToken,
        status: "0",
        sort: "2", //排序方式
        pageNo: 1,
        pageSize: 3,
        likeClubId: this.detailData.clubId,
        x: this.position.lng,
        y: this.position.lat
      };
      this.$api.queryClassListToLike(data).then(res => {
        if (res.code == "200" && res.data) {
          let arr = [];
          res.data.list.forEach((item, i) => {
            if (this.detailid !== item.id) {
              arr.push(item);
            }
          });
          this.listdata = arr;
        }
      });
    },
    callphone() {
      uni.makePhoneCall({
        phoneNumber: this.detailData.contractMobile //仅为示例
      });
    },
    async onShareAppMessage(res) {
      //分享'/course/detail/detail?id='+id
      return {
        title: this.detailData.title,
        path: `/course/detail/detail?id=${this.detailid}&fxonoff=true`
      };
    },
    // 点击规则选择
    changeCurrentSlot(item) {
      this.currentCheckedSlot = item;
    }
  }
};
</script>

<style lang="scss">
.van-tabs__nav {
  height: 50px;
  line-height: 50px;

  .van-ellipsis {
    line-height: 50px;
  }

  .van-tab--active {
    color: $public-color-blue1;
  }
}

.biankuang {
  background-color: #fff;
  width: 100%;
  border-radius: 25rpx;
  box-shadow: 0px 5rpx 5rpx 0px rgba(204, 204, 204, 0.5);
  padding: 29rpx 20rpx 30rpx;
  box-sizing: border-box;
  margin-bottom: 15rpx;
  .head {
    color: #333;
    font-size: 34rpx;
    display: flex;
    margin-bottom: 30rpx;
    line-height: 34rpx;
    justify-content: space-between;
    .ccc {
      font-size: 24rpx;
      color: #ccc;
    }
    .c99 {
      font-size: 28rpx;
      color: #999;
      line-height: 28rpx;
      height: 28rpx;
      display: flex;
      align-items: center;
      > text {
        margin-right: 15rpx;
      }
    }
  }
  .small {
    display: flex;
    width: 100%;
		padding-top: 20rpx;
    view {
      padding: 0 10rpx;
      background-color: $bg-color-cheng;
      color: $text-color-cheng;
      border-radius: 5rpx;
      margin-right: 10rpx;
      font-size: 24rpx;
      white-space: nowrap;
    }
  }
}
.transi {
  position: fixed;
  z-index: 1;
  left: 0;
  top: -100rpx;
  opacity: 0;
  background: #FFFFFF;
  transition: all 0.2s linear;
  &.show {
    opacity: 1;
    top: 0;
  }
}
.classdetail {
  position: relative;
  padding-bottom: 120rpx;
  background-color: #f2f2f2;
  .headimg {
    width: 750rpx;
    height: 530rpx;
    .swiper_wrap {
      width: 100%;
      height: 100%;
    }
    image {
      width: 100%;
      height: 100%;
    }
  }
  .paytime {
    width: 100%;
    .paystart {
      width: 100%;
      height: 97rpx;
      line-height: 97rpx;
      display: flex;
      justify-content: space-between;
      color: #fff;
      font-size: 26rpx;
      padding-left: 30rpx;
      background-color: #f77350;
      align-items: center;
      padding-right: 10rpx;
      .r {
        display: flex;
        justify-content: flex-end;
        color: #fff;
        font-size: 26rpx;
        align-items: center;
        padding-right: 10rpx;
        > view {
          width: 50rpx;
          height: 41rpx;
          background-color: #db4821;
          border-radius: 5rpx;
          margin: 0 8rpx;
          text-align: center;
          font-size: 26rpx;
        }
      }
    }
    .payend {
      width: 100%;
      height: 97rpx;
      line-height: 97rpx;
      display: flex;
      font-size: 26rpx;
      justify-content: space-between;
      color: #fff;
      padding-left: 30rpx;
      background-color: #fdb42e;
      align-items: center;
      padding-right: 10rpx;
      .r {
        font-size: 26rpx;
        color: #fff;
        display: flex;
        justify-content: flex-end;
        > view {
          width: 50rpx;
          height: 41rpx;
          background-color: #f0882c;
          border-radius: 5rpx;
          margin: 0 8rpx;
          text-align: center;
          font-size: 26rpx;
        }
      }
    }
    .classPrice {
      display: flex;
      // justify-content: flex-end;
      align-items: center;
      align-items: baseline;
    }
    .ys {
      font-size: 24rpx;
      color: #fff;
      margin-right: 5rpx;
      line-height: 97rpx;
    }
    .yb {
      font-size: 46rpx;
      color: #fff;
      line-height: 97rpx;
    }
  }
  .tab_wrap {
    width: 100%;
    background-color: #fff;
    .van-tabs {
      height: 90rpx;
    }
    .van-tabs__wrap {
      height: 90rpx;
    }
    .van-tabs__nav {
      height: 90rpx;
      line-height: 90rpx;
      border-bottom: 1px solid #e9e9e9;
      .van-ellipsis {
        line-height: 90rpx;
      }
      .van-tab--active {
        color: $public-color-blue1;
      }
    }
  }
  .scroll-view {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .ccc_wrap {
    //内容区
    background-color: #f2f2f2;
    padding: 15rpx 10rpx;
    width: 750rpx;
    box-sizing: border-box;
    .classtit {
      display: flex;
      justify-content: space-between;
      height: auto;
      .l {
        width: 610rpx;
        height: 100%;
        .classPrice {
          display: flex;
          // justify-content: flex-end;
          align-items: center;
          align-items: baseline;
          margin-bottom: 10rpx;
        }
				.cumulactive{
					width: 100%;
					display: flex;
					margin-bottom: 20rpx;
					.cumulactive_max{
						border: 1rpx solid #FEE5B8;
						border-radius: 30rpx;
						padding: 2rpx 10rpx;
						font-size: 24rpx;
						color: #fdb42e;
					}
					.cu_margin{
						margin-left: 10rpx;
					}
				}
        .ys {
          font-size: 24rpx;
          color: #fdb42e;
          margin-right: 5rpx;
        }
        .yb {
          font-size: 46rpx;
          color: #fdb42e;
          font-weight: bold;
          line-height: 50rpx;
        }
        text {
          width: 100%;
          margin-bottom: 15rpx;
          font-size: 34rpx;
          color: #333;
          line-height: 40rpx;
        }
        .small {
          display: flex;
          width: 100%;
					padding-bottom: 20rpx;
          view {
            padding: 0 10rpx;
            background-color: $bg-color-cheng;
            color: $text-color-cheng;
            border-radius: 5rpx;
            margin-right: 10rpx;
            font-size: 24rpx;
						line-height: 1.4;
          }
        }
      }
      .r {
				width: 100rpx;
        display: flex;
        flex-wrap: wrap;
        height: auto;
        .fenxiang {
          display: flex;
          text-align: right;
          align-items: center;
          justify-content: flex-end;
          border: none;
          font-size: 28rpx;
          line-height: 40rpx;
          color: #2e87ff;
          margin: 0;
          padding: 0;
          background: none;
          > text {
            display: block;
          }
        }
        .fenxiang::after {
          border: none;
        }
        .iconfx {
          width: 22rpx;
          height: 24rpx;
          background: url($public-baseImgUrl+"icon_fenxiang.png") no-repeat;
          background-size: 22rpx 24rpx;
          margin-right: 10rpx;
        }
        > view:first-child {
          width: 100%;
          font-size: 28rpx;
          text-align: right;
          color: $public-color-blue1;
        }
        > view:last-child {
          width: 100%;
          text-align: right;
          align-self: flex-end;
          font-size: 26rpx;
          color: #999;
        }
      }
    }
    .shuoming {
      .tit {
        font-size: 30rpx;
        color: #666;
        margin-bottom: 45rpx;
        text-align: justify;
      }
      .shorttime {
        .time {
          font-size: 30rpx;
          color: #666;
          margin-bottom: 20rpx;
          line-height: 35rpx;
        }
        .times {
          display: flex;
          flex-wrap: wrap;
          view {
            font-size: 24rpx;
            color: #666;
            background-color: #f1f1f1;
            padding: 0 10rpx;
            height: 31rpx;
            line-height: 31rpx;
            border-radius: 5rpx;
            margin-right: 10rpx;
          }
        }
      }
      .langtimes {
        overflow-x: scroll;
        .wrap {
          display: table;
          border: $public-border;
          border-radius: 15rpx;
        }
        .langtime_wrap {
          background-color: #fff;
          border-radius: 15rpx;
          padding-right: 25rpx;
          width: auto;
          display: table;
          border-collapse: collapse; //合并边框
          overflow-x: scroll;
          // 宽度不能设置，要完全显示可以用
          word-break: keep-all;
          // 设置不换行
          white-space: nowrap;
          background-color: #ffffff;
          .tr {
            display: table-row;
            margin-right: 25rpx;
            // background-color:#fff;
          }
          .head {
            height: 90rpx;
            border-bottom: $public-border;
            line-height: 90rpx;
            color: #999;
            font-size: 30rpx;
          }
          .th {
            display: table-cell;
            text-align: center;
            // border-right:$public-border;
            min-width: 200rpx;
            height: 90rpx;
            line-height: 90rpx;
          }
          .td {
            display: table-cell;
            text-align: center;
            min-width: 200rpx;
            height: 84rpx;
            line-height: 84rpx;
            // border-right: $public-border;
						.td_line{
							display: flex;
							align-items: center;
							justify-content: center;
						}
            > view {
              height: 84rpx;
              line-height: 84rpx;
              border-bottom: $public-border;
            }
            > view:last-child {
              border: none;
            }
          }
          .con {
            line-height: 84rpx;

            // border-bottom: $public-border;
          }
					.th_two{
						display: table-cell;
						text-align: center;
						min-width:233rpx;
						height: 90rpx;
						line-height: 90rpx;
					}
					.td_two{
						display: table-cell;
						text-align: center;
						min-width:229rpx;
						.td_one:last-child{
							border-bottom:none;
						}
						.td_line:last-child{
							border-bottom:none;
						}
						.td_line_two{
							border-bottom:$public-border;
							padding: 20rpx 0;
						}
						.td_line_two:last-child{
							border-bottom:none;
						}
					}
          .td_line {
            height: 85rpx;
            line-height: 85rpx;
            padding: 15rpx 0;
            box-sizing: content-box;
          }
        }
      }
    }
    .julebu {
      .con {
        display: flex;
				align-items: flex-start;
        .conimg {
          width: 150rpx;
          height: 150rpx;
          // margin-bottom: 30rpx;
          margin-right: 20rpx;
          overflow: hidden;
          image {
            width: 100%;
            height: 100%;
            border-radius: 15rpx;
          }
        }
        .rcon {
          width: 512rpx;
          display: flex;
          justify-content: space-between;
          border-bottom: $public-border;
          padding-bottom:30rpx;
        }
        .condata {
          width: 400rpx;
          min-height: 150rpx;
          margin-right: 20rpx;
          display: flex;
          flex-wrap: wrap;
          align-content: space-between;
          > text {
            // margin-bottom:15rpx;
            font-size: 34rpx;
            color: #333;
            width: 100%;
            line-height: 40rpx;
          }
          .xing {
            // margin-bottom:30rpx;
            color: #fdd549;
            font-size: 26rpx;
            > text {
              margin-left: 15rpx;
            }
          }
        }
        .dingwei {
          height: 150rpx;
          display: flex;
          flex-wrap: wrap;
          .top {
            width: 100%;
            font-size: 24rpx;
            color: #ccc;
            text-align: right;
          }
          .bot {
            width: 100%;
            height: 64rpx;
            text-align: right;
            align-self: flex-end;
            color: $public-color-blue1;
            font-size: 64rpx;
          }
        }
      }
      .dizhi {
        display: flex;
        justify-content: space-between;
        padding-top: 30rpx;
        .l {
          font-size: 36rpx;
          color: #ccc;
          width: 30rpx;
          margin-right: 8rpx;
          .icondw {
            width: 31rpx;
            height: 36rpx;
            background: url($public-baseImgUrl+"icon-location-grey.png")
              no-repeat;
            background-size: 31rpx 36rpx;
          }
        }
        .c {
          width: 580rpx;
          margin-right:30rpx;
          text {
            font-size: 34rpx;
            color: #333;
            display: block;
            line-height: 36rpx;
          }
          .ccc {
            padding-top: 15rpx;
            font-size: 26rpx;
            color: #999;
            
          }
          .c-top {
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            .place-name {
            }
            .place-distance {
              font-size: 24rpx;
              color: #ccc;
            }
          }
        }
        .r {
          // width:30rpx;
          font-size: 28rpx;
          color: #999;
          display: flex;
          align-items: center;
          .top {
            width: 100%;
            font-size: 24rpx;
            color: #ccc;
            text-align: right;
          }
        }
      }
    }
    .jiaolian {
      .jl_con {
        width: 100%;
        display: flex;
        // justify-content: space-between;
        .l {
          width: 122rpx;
          height: 122rpx;
          position: relative;
          border-radius: 50% 50%;

          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          margin-right: 15rpx;
          .icon_hg {
            width: 47rpx;
            height: 48rpx;
            position: absolute;
            right: -7rpx;
            top: -15rpx;
            background: url($public-baseImgUrl+"icon_huangguan.png") no-repeat;
            background-size: 100% 100%;
          }
          image {
            width: 110rpx;
            height: 110rpx;
            border-radius: 50% 50%;
          }
          &.bor {
            border: 4rpx solid $public-color-yellow2;
          }
        }
        .c {
          width: 100%;
          height: 122rpx;
          display: flex;
          flex-wrap: wrap;
          align-content: space-between;
          .name {
            font-size: 34rpx;
            line-height: 36rpx;
            color: #333;
            margin-bottom: 10rpx;
            display: block;
            width: 100%;
          }
          .jlb {
            font-size: 26rpx;
            line-height: 30rpx;
            color: #999;
            margin-bottom: 8rpx;
            display: block;
            width: 100%;
          }
          .xing {
            margin-bottom: 30rpx;
            color: #fdd549;
            font-size: 26rpx;
            line-height: 30rpx;
            display: flex;
            align-items: center;
            > text {
              margin-left: 15rpx;
            }
          }
        }
        .r {
          .s {
            > view {
              background-color: #fff;
              border: 1rpx solid rgba(247, 115, 80, 0.2);
              line-height: 29rpx;
              height: 32rpx;
              white-space: nowrap;
            }
          }
        }
      }
    }
    .gmxz_con {
      font-size: 30rpx;
      line-height: 40rpx;
      > view {
        margin-bottom: 15rpx;
        text:first-child {
          color: #999;
        }
        text:last-child {
          color: #333;
        }
      }
    }
    .zhu {
      width: 100%;
      padding-right: 30rpx;
      box-sizing: border-box;
      text-align: right;
      color: $public-color-yellow1;
      font-size: 24rpx;
    }
    .mar_none{
      margin:0;
    }
  }
  .hui {
    width: 100%;
    height: 15rpx;
    background-color: #f2f2f2;
  }
}
.detail_btnwrap {
  border-top: 1px solid #f2f2f2;
  background-color: #fff;
  width: 750rpx;
  height: 108rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: content-box;
  // align-items:baseline;
  box-shadow: 0px 5rpx 5rpx 0px rgba(204, 204, 204, 0.5);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .jg {
    font-size: 24rpx;
    color: #999;
    line-height: 78rpx;
  }
  .ys {
    font-size: 24rpx;
    color: #fdb42e;
    margin-right: 5rpx;
    line-height: 78rpx;
  }
  .yb {
    font-size: 42rpx;
    color: #fdb42e;
    margin-right: 30rpx;
    line-height: 78rpx;
  }
  .btn {
    width: 255rpx;
    // height: 78rpx;
    overflow: hidden;
  }
  .jijiang {
    width: 238rpx;
    height: 68rpx;
    background: url($public-baseImgUrl+"btn_jijiang.png") no-repeat;
    background-size: 238rpx 68rpx;
    color: #fff;
    line-height: 68rpx;
    text-align: center;
  }
  .jieshu {
    width: 238rpx;
    height: 68rpx;
    background: url("@/static/images/classend.png") no-repeat;
    background-size: 238rpx 68rpx;
    color: #fff;
    line-height: 68rpx;
    text-align: center;
  }
}
.hypopup {
  padding: 45rpx 30rpx 30rpx;
  .class-info-head {
    padding-bottom: 30rpx;
    border-bottom: $public-border;
    display: flex;
    align-items: center;
    image {
      margin-right: 20rpx;
      width: 124rpx;
      height: 124rpx;
    }
    .info-detail {
      display: flex;
      flex-direction: column;
      .price {
        color: $public-color-yellow1;
        text {
          &:first-of-type {
            font-size: 24rpx;
          }
          &:nth-of-type(2) {
            font-size: 46rpx;
          }
        }
      }
      .change-title {
        font-size: 26rpx;
        color: $text-color-grey;
      }
    }
  }
  .list-wrap {
    // min-height: 560rpx;
    margin: 30rpx 0;
    max-height: 500rpx;
    min-height: 500rpx;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    .list-item {
      margin-bottom: 30rpx;
      padding: 0 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      width: max-content;
      min-height: 70rpx;
      background: #f2f2f2;
      color: $text-color;
      border-radius: 10rpx;
      border: 2rpx solid #f2f2f2;
      &.active {
        background: #f9fbff;
        color: $public-color-blue1;
        border: 2rpx solid $public-color-blue1;
      }
    }
  }
}
.uni-navbar--border {
  border-bottom: transparent!important;
}
</style>
